<template>
  <Card>
    <a-input-search
      v-model:value="form.input"
      placeholder="请输入IP地址或域名"
      enter-button
      @search="onSearch"
      style="width: 40%; min-width: 200px"
    />
  </Card>
  <Card class="mt_10">
    <div class="m1">
      <div class="round">8.210.88.161</div>
      <div class="txtList">
        <p>
          <span>重合网站数</span>
          <span>882</span>
        </p>
        <p>
          <span>相似网站数</span>
          <span>882</span>
        </p>
        <p>
          <span>同IP网站数</span>
          <span>882</span>
        </p>
        <p>
          <span>同C段资产数</span>
          <span>882</span>
        </p>
        <p>
          <span>友情链接数</span>
          <span>882</span>
        </p>
      </div>
      <div class="txtTip">
        <span>被重合率最高</span>
        <span> www.baidul.com (2396)</span>
      </div>
      <div class="rightBox">
        <p>数据更新于：2023-02-02 12:00:00</p>
        <a-button class="mt_10" type="primary">一键导出 </a-button>
      </div>
    </div>

    <Card class="mt_10">
      <template #header>
        <a-row class="w_100b" :gutter="[0, 16]">
          <a-col :xs="24" :sm="24" :md="24" :lg="18">
            <Menus :dataSource="menuList" @change="menuChange" />
          </a-col>
          <a-col :xs="24" :sm="24" :md="24" :lg="6">
            <a-space>
              <a-input v-model:value="form.search" placeholder="" />
              <a-button type="primary">新增 </a-button>
            </a-space>
          </a-col>
        </a-row>
      </template>

      <Table
        v-if="menuActive == 1"
        :dataSource="keywordOverlapWebsiteData"
        :columns="keywordOverlapWebsiteColumns"
      >
        <template #action>
          <a-button type="primary">查看 </a-button>
        </template>
      </Table>

      <Table
        v-if="menuActive == 2"
        :dataSource="pageSimilarityData"
        :columns="pageSimilarityColumns"
      >
        <template #action>
          <a-button type="primary">查看 </a-button>
        </template>
      </Table>

      <List v-if="menuActive == 3" :dataSource="IPWebsiteList">
        <template #listItem="item">
          <div style="background: #f5f7fa; border-radius: 5px;padding:10px 15px">{{ item.item }}</div>
        </template>
      </List>

      <Table
        v-if="menuActive == 4"
        :dataSource="segmentCAssetsData"
        :columns="segmentCAssetsColumns"
      >
        <template #action>
          <a-button type="primary">查看 </a-button>
        </template>
      </Table>

      <Table
        v-if="menuActive == 5"
        :dataSource="friendshipLinkData"
        :columns="friendshipLinkColumns"
      >
        <template #action>
          <a-button type="primary">查看 </a-button>
        </template>
      </Table>
    </Card>
  </Card>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import {
  menuList,
  keywordOverlapWebsiteData,
  keywordOverlapWebsiteColumns,
  pageSimilarityData,
  pageSimilarityColumns,
  segmentCAssetsData,
  segmentCAssetsColumns,
  friendshipLinkData,
  friendshipLinkColumns,
  IPWebsiteList,
} from "./href";
import Card from "@/components/Card";
import Menus from "@/components/Menus";
import Table from "@/components/Table";
import List from "@/components/List";
const menuActive = ref(1);

const form = ref({});

function menuChange(e) {
  menuActive.value = e;
}
</script>

<style lang="less" scoped>
.m1 {
  background-color: #f5f7fa;
  padding: 10px 15px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  .round {
    width: 211px;
    height: 211px;
    border-radius: 50%;
    background: linear-gradient(0deg, #00acfa 0%, #0070ee 100%);
    box-shadow: 0px 8px 15px 0px rgba(0, 113, 238, 0.3);
    font-size: 24px;
    font-weight: bold;
    color: #ffffff;
    line-height: 211px;
    text-align: center;
  }

  .txtList {
    margin-top: 20px;
    > p {
      font-size: 14px;
      margin-bottom: 10px;
      & span:first-child {
        color: #5b616c;
        min-width: 100px;
        display: inline-block;
      }
      & span:last-child {
        color: #000000;
      }
    }
  }
  .txtTip {
    margin-top: 20px;
    background: #e6e9ed;
    border: 1px solid #caced3;
    padding: 5px;
    border-radius: 5px;
    font-size: 14px;
    color: #000000;
  }
  .rightBox {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    > p {
      color: #132240;
      font-size: 14px;
    }
  }
}
</style>
